<template>
  <section class="recharge-info">
    <section class="info-main">
      <el-card class="main-card">
        <section slot="header" class="clearfix">
          <span>充值信息</span>
        </section>
        <section class="card-info">
          <template>
            <section class="info-item">
              <div class="item-label">企业ID：</div>
              <div class="item-content">{{info.bid||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">企业名称：</div>
              <div class="item-content">{{info.bname||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">充值名称：</div>
              <div class="item-content">{{info.applyName||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">充值账号：</div>
              <div class="item-content">{{getAcc(info.rechargeNumber)}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">充值账号名称：</div>
              <div class="item-content">{{info.rechargeName||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">用途：</div>
              <div class="item-content">{{info.purposeName||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">充值金额（元）：</div>
              <div class="item-content">{{info.rechargeAmount||''}}</div>
            </section>
            <section class="info-item">
              <div class="item-label">备注：</div>
              <div class="item-content">{{info.remark||''}}</div>
            </section>
            <template v-if="t=='view'">
              <section class="info-item">
                <div class="item-label">申请人：</div>
                <div class="item-content">{{info.applicantName||''}}</div>
              </section>
              <section class="info-item">
                <div class="item-label">申请时间：</div>
                <div class="item-content">{{info.applyTime||''}}</div>
              </section>
              <section class="info-item">
                <div class="item-label">审核人：</div>
                <div class="item-content">{{info.reviewerName||''}}</div>
              </section>
              <section class="info-item">
                <div class="item-label">审核时间：</div>
                <div class="item-content">{{info.auditTime||''}}</div>
              </section>
              <!-- <section class="info-item">
                <div class="item-label">审核说明：</div>
                <div class="item-content">{{info.auditExplain||''}}</div>
              </section> -->
            </template>
          </template>
        </section>
      </el-card>
    </section>

    <div class="check-footer">
      <el-button style="padding: 8px 30px;"  type="primary" @click="handleCancel">返 回</el-button>

    </div>
  </section>
</template>
<script>
import {
  get,
  getDictByCode,
} from '../api'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'Info',
  data() {
    return {
      email: '',
      i: '',
      t: '',
      emailList: [],
      info: {},
      form: {
        auditResult: '',
        auditExplain: '',
        email: '',
        emailCode: ''
      }

    }
  },
  created() {
    if (this.$route.query.i) {
      this.i = this.$route.query.i || ''
      for (const key in this.dict) {
        this.getDict(key)
      }
      this.getData()
    } else {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    }
  },
  methods: {
    getAcc(r) {
      return r ? CryptoJS.$aesJieM(r) : ''
    },
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(res => {
          this.dict[code] = (res.data.data && res.data.data.length > 0) ? res.data.data[0]
              .list : []
        }).catch(error => {
          reject(error)
        })
      })
    },
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get(this.i).then(res => {
          loading.close()
          if (res.data.code == '200') {
            try {
              this.info = res.data.data
              this.form.auditResult = res.data.data.auditStatus || ''
              if (this.t == 'view') {
                this.form.email = res.data.data.email ? res.data.data.email : ''
                this.form.auditExplain = res.data.data.auditExplain ? res.data.data
                    .auditExplain : ''
              }
            } catch (err) {}
            resolve()
          } else {
            this.$message.error(res.data.msg || '详情获取失败')
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    handleCancel() {
      this.$router.back()
    },

  }
}
</script>
<style lang="scss">
.recharge-info {
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;

  .info-main {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 52px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 8px;
      /*对垂直流动条有效*/
      height: 1px;
      /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    &:hover {
      overflow: auto;
    }

    .card-info {
      .info-item {
        padding-bottom: 8px;
        vertical-align: top;
        display: flex;

        .item-label {
          color: rgba(0, 0, 0, 1);
          font-weight: 400;
          font-size: 14px;
          line-height: 1.5715;
          text-align: start;
        }

        .item-content {
          flex: 1 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 1.5715;
          word-break: break-word;
          overflow-wrap: break-word;

          .item-image {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }

          .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;

            .image-slot {
              background-color: #f5f7fa;
            }
          }
        }
      }
    }
  }

  .check-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
